<script setup lang="ts">
import MdiAboutCircleOutline from '~icons/mdi/about-circle-outline'
import MdiArrowUpBoldCircleOutline from '~icons/mdi/arrow-up-bold-circle-outline'
import MdiMessageReplyTextOutline from '~icons/mdi/message-reply-text-outline'
import type { MenuItem } from '@renderer/components/Menu/types'
enum Command {
  FEEDBACK,
  APP_UPDATE,
  ABOUT_INFO
}

function handleCommand(command: Command):void {
  switch (command) {
    case Command.FEEDBACK:
      alert("正在开发中...")
      break
    case Command.APP_UPDATE:
      window.electron.ipcRenderer.send('application:open-check-update')
      break
    case Command.ABOUT_INFO:
    alert("正在开发中...")
      break;
  }
}

const menus = [
  {
    icon: 'mage:dashboard-chart-fill',
    title: '仪表盘',
    path: "/main/dashboard"
  },
  {
    icon: 'mdi:database',
    title: '数据源',
    path: "/main/datasource"
  },
  {
    icon: 'mdi:bug',
    title: '模板调试',
    path: "/main/template/debug"
  },
  {
    icon: 'mdi:code',
    title: '代码生成',
    path: "/main/code/generate"
  }
]

const router = useRouter()

function handleClickMenuItem(item: MenuItem): void {
  router.push(item.ext.path)
}

const route = useRoute()
function handleCheckMenuItemIsChecked(item: any):boolean {
  return item.path === route.fullPath
}

function handleDoubleClick() {
  window.electron.ipcRenderer.send('application:toggle-maximize-window')
}


</script>

<template>
  <div class="main-layout">
    <el-container>
      <el-aside class="aside" width="200px">
        <Logo class="drag" style="margin: 10px;" show-title/>
        <menu-radio-group @click-menu-item="handleClickMenuItem">
            <menu-item  v-for="(item,index) in menus" :icon="item.icon" :title="item.title"
            :ext="item" :key="`menu_item_${index}`" :checked="handleCheckMenuItemIsChecked(item)"/>
        </menu-radio-group>
      </el-aside>
      <el-container>
        <el-header>
          <div class="header drag" @dblclick="handleDoubleClick">
            <div class="header-right">
              <el-dropdown @command="handleCommand" trigger="click" placement="bottom-start">
                <el-icon size="23" class="header-menu no-drag" style="color: var(--el-color-primary);">
                  <icon-mdi-menu></icon-mdi-menu>
                </el-icon>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item :command="Command.FEEDBACK">
                      <el-icon size="18">
                        <MdiMessageReplyTextOutline />
                      </el-icon>
                      修复与反馈
                    </el-dropdown-item>
                    <el-dropdown-item :command="Command.APP_UPDATE">
                      <el-icon size="18">
                        <MdiArrowUpBoldCircleOutline />
                      </el-icon>
                      在线升级
                    </el-dropdown-item>
                    <el-dropdown-item :command="Command.ABOUT_INFO">
                      <el-icon size="18">
                        <MdiAboutCircleOutline />
                      </el-icon>
                      关于
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <WinOptions closeable minimizeable maximizeable always-on-topable />
            </div>
          </div>
        </el-header>
        <el-main style="--el-main-padding: 10px;">
          <el-scrollbar  max-height="calc(var(--inner-window-height) - 30px - 20px)">
            <RouterView />
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="less" scoped>
.main-layout {
  border-radius: 4px;
  user-select: none;
  .aside {
    background-color: #eee;
    height: var(--inner-window-height);
    border-radius: 4px 0px 0px 4px;
    user-select: none;
  }
}
.main-layout :deep(.el-header) {
  --el-header-padding: 0px 10px;
  --el-header-height: 30px;
}

input[type="radio"] + .menu-item{
  display: block;
  padding: 10px;
  background-color: #fff;
  margin: 10px;
  border-radius: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}

input[type="radio"]:checked + .menu-item{
  background-color: var(--el-color-primary);
  color: #fff;
}

.header {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  .header-right {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .header-menu  {
    cursor: pointer;
  }
  // background-color: var(--el-color-primary);
}
</style>
